<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-row justify="space-between">
          <el-col :span="4">
            <el-card
              style="height: 180px; margin-bottom: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
              <div style="display: flex; align-items: center;">
                <el-icon>
                  <Monitor />
                </el-icon>
                <div style="font-size: 18px; font-weight: bold; color: #333; margin-left: 10px;">
                  设备总数</div>
              </div>
              <div style="font-size: 32px; font-weight: bold; color: #007bff; margin-top: 10px; text-align: center;">
                32645</div>
              <div style="font-size: 12px; color: #999; margin-top: 5px; text-align: center;">今日新增 365</div>
            </el-card>
          </el-col>
          <el-col :span="4"><el-card
              style="height: 180px; margin-bottom: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
              <div style="display: flex; align-items: center;">
                <el-icon>
                  <Tools />
                </el-icon>
                <div style="font-size: 18px; font-weight: bold; color: #333; margin-left: 10px;">在线数量</div>
              </div>
              <div style="font-size: 32px; font-weight: bold; color: #007bff; margin-top: 10px; text-align: center;">
                29240</div>
              <div style="font-size: 12px; color: #999; margin-top: 5px; text-align: center;">今日新增 200</div>
            </el-card></el-col>
          <el-col :span="4"><el-card
              style="height: 180px; margin-bottom: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
              <div style="display: flex; align-items: center;">
                <el-icon>
                  <Bell />
                </el-icon>
                <div style="font-size: 18px; font-weight: bold; color: #333; margin-left: 10px;">告警总数</div>
              </div>
              <div style="font-size: 32px; font-weight: bold; color: #007bff; margin-top: 10px; text-align: center;">163
              </div>
              <div style="font-size: 12px; color: #999; margin-top: 5px; text-align: center;">今日新增 15</div>
            </el-card></el-col>
          <el-col :span="4"><el-card
              style="height: 180px; margin-bottom: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
              <div style="display: flex; align-items: center;">
                <el-icon>
                  <DocumentCopy />
                </el-icon>
                <div style="font-size: 18px; font-weight: bold; color: #333; margin-left: 10px;">类型总数</div>
              </div>
              <div style="font-size: 32px; font-weight: bold; color: #007bff; margin-top: 10px; text-align: center;">12
              </div>
              <div style="font-size: 12px; color: #999; margin-top: 5px; text-align: center;">今日新增 2</div>
            </el-card></el-col>
          <el-col :span="4"><el-card
              style="height: 180px; margin-bottom: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
              <div style="display: flex; align-items: center;">
                <el-icon>
                  <HomeFilled />
                </el-icon>
                <div style="font-size: 18px; font-weight: bold; color: #333; margin-left: 10px;">厂商总数</div>
              </div>
              <div style="font-size: 32px; font-weight: bold; color: #007bff; margin-top: 10px; text-align: center;">6
              </div>
              <div style="font-size: 12px; color: #999; margin-top: 5px; text-align: center;">今日新增 1</div>
            </el-card></el-col>
        </el-row>
        <el-card style="height: 280px;width: 100%;margin-bottom: 25px;">
          <el-table :data="tableData" style="width: 100%" stripe highlight-current-row>
            <el-table-column prop="deviceType" label="设备类型" align="center"></el-table-column>
            <el-table-column prop="totalCount" label="设备总数" align="center">
            </el-table-column>
            <el-table-column prop="onlineCount" label="在线数量" align="center">
            </el-table-column>
            <el-table-column label="设备总数" align="center">
              <template #default="scope">
                <el-progress :percentage="parseFloat((scope.row.onlineCount / scope.row.totalCount * 100).toFixed(2))"
                  :stroke-width="10"></el-progress>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="height: 485px;width: 100%;margin-bottom: 25px;">
          <div ref="pieChartRef" style="width: 100%; height: 485px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card style="height: 300px;width: 100%;">
          <div ref="lineChartRef" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import * as echarts from "echarts";
const version = ref('1.0.0')

const pieChartRef = ref(null);
const lineChartRef = ref(null);

// 定义表格数据
const tableData = ref([
  { deviceType: 'Wi-Fi 5 Mesh智能路由器', totalCount: 2400, onlineCount: 2100 },
  { deviceType: 'Wi-Fi 6 Mesh智能路由器', totalCount: 9000, onlineCount: 6789 },
  { deviceType: 'MINI路由器', totalCount: 376, onlineCount: 333 },
  { deviceType: 'AI智能网络摄像头', totalCount: 610, onlineCount: 580 },
  { deviceType: '智能网络摄像头', totalCount: 400, onlineCount: 370 }
]);

onMounted(() => {
  initPieChart()
  initLineChart()
});

function initPieChart() {
  // 初始化饼图
  const pieChart = echarts.init(pieChartRef.value);

  // 定义 5 组数据
  const pieData = [
    { value: 335, name: 'Wi-Fi 5 Mesh智能路由器' },
    { value: 310, name: 'Wi-Fi 6 Mesh智能路由器' },
    { value: 234, name: 'MINI路由器' },
    { value: 135, name: 'AI智能网络摄像头' },
    { value: 1548, name: '智能网络摄像头' }
  ];

  // 定义不过于鲜艳的颜色
  const colors = ['#FFCC99', '#99CCFF', '#CCFF99', '#FF99CC', '#CC99FF'];

  // 饼图配置项
  const option = {
    color: colors,
    title: {
      text: '类型占比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '设备类型',
        type: 'pie',
        radius: '50%',
        data: pieData,
        // 添加 label 配置项来显示数据
        label: {
          show: true,
          formatter: '{b}: {c} ({d}%)' // 显示名称、数值和百分比
        }
      }
    ]
  };

  // 使用配置项显示饼图
  pieChart.setOption(option);
}

function initLineChart() {
  // 初始化折线图
  const lineChart = echarts.init(lineChartRef.value);

  // 定义 5 组数据
  const legendData = [
    'Wi-Fi 5 Mesh智能路由器',
    'Wi-Fi 6 Mesh智能路由器',
    'MINI路由器',
    'AI智能网络摄像头',
    '智能网络摄像头',
  ];

  // 生成 30 天的日期
  const dates = [];
  const now = new Date();
  for (let i = 0; i < 30; i++) {
    const date = new Date(now);
    date.setDate(now.getDate() - i);
    dates.unshift(date.toLocaleDateString());
  }

  // 生成 5 组随机设备数量数据，波动范围缩小，且每组起点不同，总体增长
  const dataSets = [];
  const startOffsets = [100, 888, 1500, 2800, 666]; // 定义不同的起始偏移量
  const maxDelta = 789; // 最大波动值
  const baseIncrement = 325; // 基础增长值
  const decreaseProbability = 0.5; // 数据减少的概率

  for (let i = 0; i < 5; i++) {
    const data = [];
    const startValue = 3000 + startOffsets[i]; // 每组数据的起始值
    data.push(startValue);

    for (let j = 1; j < 30; j++) {
      let randomDelta = Math.floor(Math.random() * (2 * maxDelta + 1)) - maxDelta;

      // 一定概率让数据减少
      if (Math.random() < decreaseProbability) {
        randomDelta = -Math.abs(randomDelta);
      }

      // 加上基础增长值
      data.push(data[j - 1] + randomDelta + baseIncrement);
    }

    dataSets.push(data);
  }

  // 折线图配置项
  const option = {
    // 标题
    title: {
      text: '在线数量变化趋势',
      subtext: '近 30 天各设备数量变化',
      left: 'center'
    },
    // 提示框
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 工具盒
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    // x 轴
    xAxis: {
      type: 'category',
      data: dates,
      boundaryGap: false,
      axisLabel: {
        rotate: 45, // 旋转 x 轴标签，避免重叠
        interval: Math.floor(dates.length / 5), // 控制 x 轴标签显示间隔
        // 自定义日期显示格式，去掉年份
        formatter: (value) => {
          const date = new Date(value);
          return `${date.getMonth() + 1}/${date.getDate()}`;
        }
      }
    },
    // y 轴
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    // 网格线
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    // 系列数据
    series: dataSets.map((data, index) => ({
      type: 'line',
      data: data,
      name: legendData[index],
      label: {
        show: false, // 初始不显示数据标签
        position: 'top'
      },
      emphasis: {
        label: {
          show: true // 鼠标悬停时显示数据标签
        }
      },
      smooth: true // 设置折线为平滑效果
    }))
  };

  // 使用配置项显示折线图
  lineChart.setOption(option);
}
</script>

<style scoped lang="scss">
.table-card {
  margin-bottom: 25px;
}

.el-table {
  th {
    background-color: #f5f7fa;
    font-weight: bold;
  }

  td {
    transition: background-color 0.3s ease;
  }

  &:hover td {
    background-color: #fafafa;
  }
}
</style>